<template>
    <div class="progress">
        <main-title>
            <div slot="topTitle">项目进度看板</div>
        </main-title>
        <!-- 图片 拖动 -->
        <!-- <div class="drag">
            <div class="box" id="dragbox">
                <div class="bar" id="dragbar" @mousedown="changestyle">
                    <div class="item">30</div>
                </div>
            </div>
        </div> -->
        <div class="bgImgBox">
          <div class="positionBox">
            <div @click="onItem(index)" class="item" :style="{left: item.left ,top: item.top}" :class="activeItem === index ? 'activeItem' : ''" v-for="(item,index) in landData.massifProjectProcessList" :key="index" >{{item.floors}}</div>
            <!-- <div class="item" style="left:600px;top:600px;">16#</div> -->
          </div>
        </div>
        <!-- 左侧选项 -->
        <div class="left_slide">
            <!-- 在建地块 -->
            <div class="dikuai">
                <div class="title">
                    <img src="../../../../../../static/img/dc/news/jindu_dikuai.png" />
                    在建地块
                </div>
                <ul class="list">
                    <li v-for="(item,index) in totalData" :key="index" @click="onTab(index)" class="item" :class="activeTab === index ? 'act':''">{{item.massif}}</li>
                </ul>
            </div>
            <!-- 计划节点 -->
            <div class="jiedian">
              <div class="title">
                <img src="../../../../../../static/img/dc/news/jindu_jiedian.png" />
                计划节点
              </div>
              <ul class="list">
                <li v-for="(item,index) in listData" @click="showDetail(index)" :key="index" class="item">{{item.project}}</li>
                <!-- <li class="item">{{item.project}}总包单位粉刷维修、批白完成</li>
                <li class="item">窗户安装完成</li>
                <li class="item">栏杆、百叶安装完成</li>
                <li class="item">入户门安装完成</li>
                <li class="item">总包单位粉刷维修、批白完成</li>
                <li class="item">窗户安装完成</li>
                <li class="item">总包单位粉刷维修、批白完成</li>
                <li class="item">窗户安装完成</li>
                <li class="item">栏杆、百叶安装完成</li>
                <li class="item">入户门安装完成</li>
                <li class="item">总包单位粉刷维修、批白完成</li>
                <li class="item">窗户安装完成</li> -->
              </ul>
              <!-- date -->
              <div class="date">
                <!-- video -->
                <div class="video">
                  <video autoplay loop src=""></video>
                </div>
                <!-- 工期 -->
                <div class="limit">
                  <div class="title">工期：{{timeScheduleData.duration}}天</div>
                  <div class="time_axis">
                    <div class="start">
                      <p>{{timeScheduleData.begin_time}}</p>
                      <span></span>
                      <p>开始时间</p>
                    </div>
                    <div class="transition actTime">
                      <p>{{timeScheduleData.end_time}}</p>
                      <span></span>
                      <p>&nbsp;</p>
                    </div>
                    <div class="end">
                      <p>{{timeScheduleData.end_time}}</p>
                      <span></span>
                      <p>结束时间</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
$(document).ready(function() {
  // var i = 0;
  // $(".jiedian > .list > .item").click(function() {
  //   var hinow = $(this).index();
  //   $(this)
  //     .addClass("act")
  //     .siblings(hinow)
  //     .removeClass("act");
  //   if (i === 0) {
  //     $(".jiedian > .date").fadeIn(800);
  //     i = 1;
  //   } else {
  //     $(".jiedian > .date").fadeOut(800);
  //     i = 0;
  //   }
  // });
});

import mainTitle from "../../dc/new/components/mainTitle";
// import change from "./components/imgJs.js";
import { GetRealEstateProjectProcessList } from "@/api/dc/index";
var i = 0;
export default {
  components: { mainTitle },
  data() {
    return {
      totalData: [],
      listData: [],
      activeTab: 0,
      activeItem: 0,
      activeListItem: 0,
      timeScheduleData: {},
      landData: {}
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.getData(); // 首付未回款
    },
    async getData() {
      try {
        var res = await GetRealEstateProjectProcessList();
        if (res.data.code === "0") {
          this.$set(this, "totalData", res.data.result);
          this.$set(this, "landData", res.data.result[0]);
          this.$set(
            this,
            "listData",
            res.data.result[0].massifProjectProcessList[0]
              .floorsProjectProcessList
          );
          $(".bgImgBox")[0].style.backgroundImage =
            "url(" + this.totalData[0].massifUrl + ")";
        }
      } catch (e) {
        console.log(e);
      }
    },
    onTab(val) {
      $(".jiedian > .date").fadeOut(0);
      i = 0;
      this.$set(this, "activeTab", val);
      $(".bgImgBox")[0].style.backgroundImage =
        "url(" + this.totalData[val].massifUrl + ")";
      this.$set(this, "landData", this.totalData[val]);
      this.$set(this, "activeItem", 0);
      this.$set(
        this,
        "listData",
        this.totalData[val].massifProjectProcessList[0].floorsProjectProcessList
      );
    },
    onItem(val) {
      $(".jiedian > .date").fadeOut(0);
      i = 0;
      this.$set(this, "activeItem", val);
      this.$set(
        this,
        "listData",
        this.landData.massifProjectProcessList[val].floorsProjectProcessList
      );
    },
    showDetail(val) {
      var hinow = $(this).index();
      $(this)
        .addClass("act")
        .siblings(hinow)
        .removeClass("act");
      // var presentTime = new Date()
      if (val === this.activeListItem) {
        if (i === 0) {
          $(".jiedian > .date").fadeIn(800);
          i = 1;
        } else {
          $(".jiedian > .date").fadeOut(800);
          i = 0;
        }
      } else {
        $(".jiedian > .date").fadeIn(800);
      }
      this.$set(this, "activeListItem", val);
      this.$set(this, "timeScheduleData", this.listData[val]);
    }
    // changestyle() {
    //   change();
    // }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../../../styles/base/_parameters";
$defaultColor: #bdb491;
$dikuaiColor: #db5c35;
$jiedianColor: #bc9620;
$startTimeColor: #8cc63f;
$endTimeColor: #db5c35;
$middleTimeColor: #29abe2;

.progress {
  @include absoluteAllSides;
  background-color: #fff;
  .bgImgBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-image: url("../../../../../../static/img/dc/news/61.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .positionBox {
      width: 100%;
      height: 100%;
      position: relative;
      .item {
        position: absolute;
        width: 40px;
        height: 40px;
        color: #fff;
        line-height: 40px;
        @include din(20px);
        text-align: center;
        background: url("../../../../../../static/img/dc/news/jindu_louhao.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
      .activeItem {
        position: absolute;
        height: 40px;
        color: #000000;
        line-height: 40px;
        text-align: center;
        background: url("../../../../../../static/img/dc/news/jindu_active.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
  }
  // 左侧选项
  .left_slide {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 320px;
    height: 100%;
    padding: 0 30px;
    background: url("../../../../../../static/img/dc/news/jindu_left.png") left
      top no-repeat;
    background-size: 100% 100%;
    // 在建地块
    .dikuai {
      width: 250px;
      .title {
        margin-top: 260px;
        color: $dikuaiColor;
        @include blod(32px);
        line-height: 1;
        & img {
          width: 27px;
          height: 27px;
          vertical-align: bottom;
        }
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin-top: 20px;
        .item {
          cursor: pointer;
          width: 70px;
          height: 58px;
          line-height: 69px;
          margin-bottom: 10px;
          border-radius: 10px;
          color: #db5c35;
          @include blod(34px);
          @include din(34px);
          text-align: center;
          background: #3d2a1f;
        }
        .act {
          color: #000;
          background-color: #db5c35;
        }
      }
    }
    // 计划节点
    .jiedian {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10px;
      z-index: 1;
      & > .title {
        margin-left: 30px;
        color: $jiedianColor;
        @include blod(26px);
        line-height: 1;
        & img {
          width: 27px;
          height: 27px;
          vertical-align: bottom;
        }
      }
      .list {
        width: 260px;
        height: calc(60px * 6);
        overflow-y: scroll;
        .item {
          height: 60px;
          padding-left: 30px;
          line-height: 60px;
          color: #bdb491;
          cursor: pointer;
          &:hover {
            background: url("../../../../../../static/img/dc/news/jindu_jiedianhover.png")
              left top no-repeat;
            background-size: 100% 100%;
          }
        }
        .act {
          width: 100%;
          height: 60px;
          background: url("../../../../../../static/img/dc/news/jindu_jiedianhover.png")
            left top no-repeat;
          background-size: 100% 100%;
        }
      }
      .date {
        display: none;
        position: absolute;
        top: 150px;
        left: 280px;
        z-index: 1;
        width: 1149px;
        .video {
          position: absolute;
          top: -150px;
          left: 220px;
          z-index: 1;
          width: 300px;
          height: 200px;
          border: 5px solid;
          border-image: linear-gradient(to top, #473b33, #1a1817) 30 30;
        }
        .limit {
          width: 1149px;
          height: 181px;
          padding-left: 50px;
          padding-right: 30px;
          font-size: 22px;
          background: url("../../../../../../static/img/dc/news/jindu_date.png")
            left top no-repeat;
          background-size: 100% 100%;
          .title {
            position: absolute;
            top: 10px;
            left: 50px;
            z-index: 1;
            color: #bdb491;
            font-weight: bold;
          }
          .time_axis {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            top: 65px;
            z-index: 1;
            width: 93%;
            height: 88px;
            text-align: center;
            background: url("../../../../../../static/img/dc/news/jindu_line.png")
              center no-repeat;
            background-size: 978px 1px;
            span {
              display: inline-block;
              position: relative;
              width: 12px;
              height: 12px;
              margin: 10px 0;
              border-radius: 50%;
            }
            .start {
              color: $startTimeColor;
              span {
                background-color: $startTimeColor;
              }
            }
            .transition {
              color: $middleTimeColor;
              transform: translateX(-210px);
              span {
                position: relative;
                background-color: $middleTimeColor;
                &::after {
                  content: "";
                  position: absolute;
                  top: -6px;
                  right: 0;
                  bottom: 0;
                  left: -6.9px;
                  z-index: 1;
                  background-color: inherit;
                  opacity: 0.3;
                  width: 25px;
                  height: 25px;
                  border: 1px solid inherit;
                  border-radius: 50%;
                }
              }
              & > p:nth-of-type(1) {
                color: inherit;
              }
            }
            & > .actTime {
              span {
              }
            }
            .end {
              color: $endTimeColor;
              span {
                background-color: $endTimeColor;
              }
            }
          }
        }
      }
    }
  }
}
</style>
